<template>
	<div class="tobeDone">
		<tableIndex
				:tableData="tableData"
				:tableHead="tableHead"
				ref="tableIndexRef"
				:isIndex="true"
				:isSelection="false"
				:isRadio="false"
				:fields="fields"
				:height="500"
				:page="page"
				:isPaging="false"
				@selectChange="selectChange"
				@searchList="searchList"
				@page-change="pageChange"
				row-key="projectSetId"
				:tree-props="{
				children: 'child',
				label: 'projectSetName',
				value: 'projectSetId',
			}"
		>
			<template #right-btn>
				<div style="float: right">
					<el-button size="small" plain class="button_edit" @click="addHandler"
					><svg-icon icon-class="add-icon-1"  class="m-r5"/>新增项目集</el-button
					>
					<el-button
							size="small"
							plain
							class="button_edit"
							@click="onExport(getSearch())"
					><svg-icon icon-class="export" class="m-r5" />一键导出</el-button
					>
				</div>
			</template>

			<template #operate>
				<el-table-column label="操作" width="300" align="center" fixed="right">
					<template #default="{ row }">
						<el-button
								size="small"
								class="button_edit m-b10"
								@click="updateHandler(row)"
								type="primary"
						>编辑</el-button>
						<el-button
								v-if="!row.pid"
								size="small"
								class="button_edit m-b10"
								@click="addSubHandler(row)"
								type="primary"
						>添加子集</el-button>
						<el-button
								size="small"
								class="button_view m-b10"
								@click="lookItemHandler(row)"
								type="primary"
						>查看项目明细</el-button
						>

						<el-button
								size="small"
								class="button_delete m-b10"
								@click="deleteHandler(row)"
								type="primary"
						>移除</el-button>
					</template>
				</el-table-column>
			</template>
		</tableIndex>
	</div>
	<projectListView ref="projectListViewRef"></projectListView>
</template>

<script setup>
import TableIndex from "@/components/table/index.vue";
import { projectApi, projectListApi } from "@/api/project";
import { useRouter } from "vue-router";
import { ref, onMounted, reactive } from "vue";
import { deriveHandelFnc } from "@/hooks/downCommon";
import ProjectListView from "@/views/constructionProjectManage/projectmanagement/components/projectListView.vue";
import { ElButton, ElInput, ElMessageBox, ElMessage } from "element-plus";
const page = reactive({
	page: 1,
	pageSize: 50,
	total: 0,
});
const fields = ref([
	{
		key: "keywords",
		label: "项目集名称",
		type: "input",
		placeholder: "根据项目集名称或编号搜索",
		width:300
	},
]);
let tableData = ref([]);
let tableHead = ref([
	{
		prop: "projectSetCode",
		label: "项目集编码",
		width: "180",
		align: "left",
	},
	{
		prop: "projectSetName",
		label: "项目集名称",
		width: "180",
	},
	{
		prop: "projectSetBelongName",
		label: "项目集归属",
		width: "180",
	},
	{
		prop: "setTotal",
		label: "项目总投(万)",
		width: "180",
		formatter: (row) => {
			return (row.setTotal/10000).toFixed(2) || 0;
		}
	},
	{
		prop: "createUserName",
		label: "创建人",
		width: "180",
	},
	{
		prop: "createTime",
		label: "创建时间",
	},
	{
		prop: "projectNum",
		label: "关联项目数",
		width: "180",
	},
]);
let activeName = ref("0");
const handleClick = (e) => {
	switch (activeName.value) {
		case "0":
			tableHead = [
				{
					prop: "date",
					label: "项目",
					width: "180",
				},
				{
					prop: "name",
					label: "任务类型",
					width: "120",
					isSvg: "",
				},
				{
					prop: "address",
					label: "项目名称",
				},
				{
					prop: "address",
					label: "状态",
				},
			];
			break;
		case "1":
			tableHead = [
				{
					prop: "date",
					label: "议题名称",
					width: "180",
				},
				{
					prop: "name",
					label: "会议时间",
					width: "120",
				},
				{
					prop: "address",
					label: "申请人",
				},
				{
					prop: "address",
					label: "所属部门",
				},
				{
					prop: "address",
					label: "创建时间",
				},
				{
					prop: "address",
					label: "创建人",
				},
			];
	}
};

const projectListViewRef = ref(null);

const selectChange = (e) => {
	console.log(e);
};

const tableIndexRef = ref(null);
//获取列表组件搜索数据
const getSearch = () => {
	return tableIndexRef.value.getSearchData();
};
const exportConfig = reactive({
	fileName: "项目集",
	apiPath: "projectSetExport",
	form: {},
});
const { onExport } = deriveHandelFnc(exportConfig);

//路由跳转
let router = useRouter();
//查看
const lookItemHandler = (row) => {
	// router.push({
	// 	path: `/constructionProjectManage/projectmanagement/lookindex/projectId=${row.projectSetId}`,
	// });
	projectListViewRef.value.open(row);
};
//编辑
const updateHandler = (row) => {
	let path = ``;
	if(!row.pid){ // 父集
		path = `/constructionProjectManage/projectmanagement/components/updateIndex/type=1&edit=${row.projectSetId}`;
	}
	if(row.pid){ // 子集
		path = `/constructionProjectManage/projectmanagement/components/updateIndex/type=1&edit=${row.projectSetId}&pid=${row.projectSetId}&projectSetBelongId=${row.projectSetBelongId}`;
	}
	router.push({
		path: path,
	});
};
//添加
const addHandler = () => {
	router.push({
		path: `/constructionProjectManage/projectmanagement/components/updateIndex/type=0&edit=`,
	});
};

/**
 * 添加子集
 * @param {*} row
 */
const addSubHandler = (row) => {
	router.push({
		path: `/constructionProjectManage/projectmanagement/components/updateIndex/type=0&edit=&pid=${row.projectSetId}&projectSetBelongId=${row.projectSetBelongId}`,
	});
}

//搜索接口请求
const searchList = (e) => {
	getPage(e);
};
//分页接口请求
const getPage = (e) => {
	let params = {
		...e,
		...getSearch(),
	};
	projectApi
			.getProjectSetListTree(params)
			.then((res) => {
				if (res.code === '200') {
					tableData.value = res.data;
				}
			});
};
//分页
const pageChange = (e) => {
	console.log(e);
	page.page = e.page;
	page.pageSize = e.limit;

	getPage();
};
//删除
const deleteHandler = (row) => {
	ElMessageBox.confirm("确认删除吗?", {
		confirmButtonText: "确认",
		confirmButtonClass:"button_view",
		cancelButtonText: "取消",
		cancelButtonClass: "button_cancel2",
		type: "warning",
	})
			.then(() => {
				projectApi.deleteProjects(row.projectSetId).then((res) => {
					if (res.code == 200) {
						ElMessage.success("删除成功");
						searchList();
					}
				});
			})
			.catch(() => {});
};
onMounted(() => {
	getPage();
});
</script>

<style lang="scss" scoped>
@import "@/views/constructionProjectManage/static/button.scss";
.tobeDone {
	width: 100%;
}
</style>
